<template>
	<view class="personaldetails">
		<navBar></navBar>
		<scroll-view scroll-y="true" class="scroll-Y" :style="{height:heightValue+'px'}">
			<view class="personal-center">
				<img :src="userInfo.avatarUrl" alt="" class="personal-center-avater" v-if="userInfo.avatarUrl" />
				<view class="personal-center-avater" style="background: #999;" v-else>
				</view>
				<view class="personal-center-content">
					<view class="personal-user">
						<text class="personal-user-name">{{userInfo.nickName||'乐趣账号1'}}</text>
						<!-- <text class="personal-user-lequ">已兑换:500乐趣粮食</text> -->
					</view>
					<view class="personal-title">
						乐趣盒子探索欢乐
					</view>
				</view>
				<!-- <img src="https://www.jk334.cn/img/user-icon.png" alt="" class="personal-user-message" /> -->
			</view>
			<view class="task-progress-box">
				<view class="task-progress">
					<view class="task-progress-title">
						当前任务进展
					</view>
					<progress :percent="pgList[0]" :show-info="false" stroke-width="3" :stroke-width="2"
						activeColor="#A77B4E" backgroundColor="rgba(222,186,135,0.5)" />
					<view class="register-game">
						注册游戏账号
					</view>
				</view>
				<view class="look-task" @click="lookTask">
					查看任务
				</view>
			</view>

			<view class="other-use">
				<view class="other-use-title">
					其他功能
				</view>
				<otherGrid></otherGrid>
			</view>
		</scroll-view>
		<u-popup :show="show" mode="bottom" @close="close()">
			<view :style="{height:'500rpx'}">
				<text>人生若只如初见，何事秋风悲画扇</text>
			</view>
		</u-popup>
	</view>
</template>

<!-- 个人中心 -->
<script>
	import navBar from '@/components/navBar/navBar.vue';
	import otherGrid from '@/components/otherGrid/otherGrid.vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getHeight
	} from '@/utiles/utils.js'
	export default {
		components: {
			navBar,
			otherGrid
		},
		data() {
			return {
				heightValue: 0,
				pgList: [20, 40, 60, 80, 100],
				userInfo: {},
				show: false
			}
		},
		onShow() {
			const windowHeight = getHeight().windowHeight //100vh
			const statusBarHeight = getHeight().statusBarHeight //tabBar高度
			const navBareight = getHeight().navBareight //头部高度
			let userInfo = JSON.parse(uni.getStorageSync('userInfo') || {})
			this.heightValue = windowHeight - statusBarHeight - navBareight
			if (JSON.stringify(userInfo) != '{}') {
				this.userInfo = userInfo
			}
		},
		methods: {
			close() {
				this.show = false
				uni.showTabBar()
			},
			goLogin() {
				uni.switchTab({
					url: "/pages/Home/Home"
				})
			},
			lookTask() {
				uni.navigateTo({
					url: "/pages/Task/MyTask"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.personaldetails {
		background-image: url("https://www.jk334.cn/img/home-bg.png");
		background-size: 100% 332rpx;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;
	}

	.personal-center {
		margin: 0 30rpx;
		padding: 40rpx 16rpx 64rpx 0;
		display: flex;
		align-items: center;

		.personal-center-avater {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			margin-right: 32rpx;
		}

		.personal-center-content {
			flex: 1;

			.personal-user {
				margin-bottom: 4rpx;
				display: flex;

				.personal-user-name {
					font-size: 36rpx;
					font-weight: bold;
					color: #323232;
				}

				.personal-user-lequ {
					margin-left: 16rpx;
					padding: 4rpx 8rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #472606;
					background: linear-gradient(134deg, #FFE58F 0%, #FFC464 100%);
					border-radius: 0 18rpx 0 18rpx;
					height: 36rpx;
					box-sizing: border-box;
				}
			}

			.personal-title {
				font-size: 24rpx;
				font-weight: 400;
				color: #A48F70;
			}
		}

		.personal-user-message {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.task-progress-box {
		height: 106rpx;
		margin: 0 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 24rpx;
		// background: linear-gradient(134deg, #FFF6E1 0%, #EDC583 100%);
		background: url('https://www.jk334.cn/img/task-bar.png');
		background-size: cover;
		background-position: center;
		// 

		.task-progress {
			width: 410rpx;

			.task-progress-title {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #472606;
				margin-bottom: 12rpx;
			}

			.register-game {
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #6B502D;
			}
		}

		.look-task {
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #472606;
			border-radius: 32rpx;
			margin-right: 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.other-use {
		height: 560rpx;
		background: #fff;
		padding-top: 120rpx;
		;
		box-sizing: border-box;

		.other-use-title {
			padding: 0 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #323232;
		}
	}
</style>